<!--  -->
<template>
  <div>
     <div class="order_a">
        <div><span>订单号：{{order.orderCode}}</span></div>
        <div><span>下单时间：{{order.orderCayTime}}</span></div>
        
        <div v-if="order.orderType==0"><span>订单类型：团购订单</span></div>
        <div v-if="order.orderType==1"><span>订单类型：普通订单</span></div>
        <div v-if="order.orderType==2"><span>订单类型：助力订单</span></div>

     </div>

     <div class="order_state_h">
         <div class="order_state_l">
         <div v-if="order.orderIsDone==0" class="cancel"><i class="el-icon-refresh-right">未完成</i></div>
         <div v-if="order.orderIsDone==null" class="cancel"><i class="el-icon-refresh-right">未完成</i></div>
         <div v-if="order.orderIsDone==1" class="complete"><i class="el-icon-truck">已完成</i></div>
         <div v-if="order.orderIsDone==2" class="cancel"><i class="el-icon-loading"></i>申请退款中</div>
         <div v-if="order.orderIsDone==3" class="cancel"><i class="el-icon-circle-close">已取消</i></div>
         </div>

         <div class="order_state_r">
             <el-steps v-if="order.orderIsDone==0" :active="2">
                <el-step title="用户下单" icon="el-icon-circle-check"></el-step>
                <el-step title="用户支付" icon="el-icon-loading"></el-step>
                <el-step title="发货" icon="el-icon-circle-check"></el-step>
                <el-step title="完成" icon="el-icon-circle-check"></el-step>
            </el-steps>
               <el-steps v-if="order.orderIsDone==null" :active="2">
                <el-step title="用户下单" icon="el-icon-circle-check"></el-step>
                <el-step title="用户支付" icon="el-icon-loading"></el-step>
                <el-step title="发货" icon="el-icon-circle-check"></el-step>
                <el-step title="完成" icon="el-icon-circle-check"></el-step>
            </el-steps>

            <el-steps v-if="order.orderIsDone==1" :active="4">
                <el-step title="用户下单" icon="el-icon-circle-check"></el-step>
                <el-step title="用户支付" icon="el-icon-circle-check"></el-step>
                <el-step title="发货" icon="el-icon-circle-check"></el-step>
                <el-step title="完成" icon="el-icon-circle-check"></el-step>
            </el-steps>

            <el-steps v-if="order.orderIsDone==2" :active="3">
                <el-step title="用户下单" icon="el-icon-circle-check"></el-step>
                <el-step title="用户支付" icon="el-icon-circle-check"></el-step>
                <el-step title="申请退款中" icon="el-icon-loading"></el-step>
                <el-step title="退款" icon="el-icon-circle-check"></el-step>
            </el-steps>
            <el-steps v-if="order.orderIsDone==3" :active="2">
                <el-step title="用户下单" icon="el-icon-circle-check"></el-step>
                <el-step title="取消" icon="el-icon-circle-close"></el-step>
            </el-steps>

         </div>
     </div>

     <div class="jkl">
         <div class="w20 jkl_1">
             <p>发货人：</p>
             <p>配送方式：快递</p>
             <p>快递公司：</p>
             <p>快递单号：{{order.orderExpressNum}}</p>
             <el-image :src="order.goods.goodsImg"></el-image>
              <p>{{order.goods.goodsName}}</p>
              <p>{{order.goods.goodsDesc}}</p>
         </div>
        <div class="w60 jkl_2">
            <div>
            <i class="el-icon-truck"></i>
            <p>暂无物流动态</p>
            </div>
        </div>
     </div>


     <div class="information">
         <div>
             <h4>收货信息</h4>
             <p>收货人：{{order.address.addressName}}</p>
             <p>收货地址：{{order.address.addressContent}}</p>
             <p>联系方式：{{order.address.addressPhone}}</p>
         </div>


         <div>
             <h4>配送信息</h4>
             <p>配送方式：快递</p>
             <p>发货时间：</p>
         </div>

         <div>
             <h4>付款信息</h4>
             <p>付款方式：</p>
             <p>付款时间：{{order.orderPayTime}}</p>
             <p>商品总额：￥{{order.orderGoodsPrice*order.orderGoodsNum}}</p>
             <p>实付款：￥{{order.orderGoodsPrice*order.orderGoodsNum}}</p>
             <p>优惠劵减免：</p>
         </div>
         <div>
             <h4>买家信息</h4>
             <p>用户名：{{order.address.addressName}}</p>
             <p>备注：</p>

             <el-button v-if="order.orderIsDone==4" @click="yjfh(order.orderExpressNum,order.orderId)" class="yjfh" type="success" round>一键发货</el-button>
         </div>
     </div>
     <div>
        <div class="tbhead_head">
      <div class="w40 tbhead"><h4>商品信息</h4></div>
      <div class="w12 tbhead"><h4>单价</h4></div>
      <div class="w12 tbhead"><h4>数量</h4></div>
      <div class="w12 tbhead"><h4>优惠信息</h4></div>
      <div class="w12 tbhead"><h4>小计</h4></div>
      <div class="w12 tbhead"><h4>实收款</h4></div>

        </div>
     </div>
     <div class="order_tb">
         <div class="w40 order_spname">
             <el-image class="image" :src="order.goods.goodsImg"></el-image>
           <p class="top">{{order.goods.goodsName}}</p  >
           
         </div>
         <div class="w12 bor"> <p class="top"> ￥{{order.orderGoodsPrice}}</p></div>
         <div class="w12 bor"> <p class="top">{{order.orderGoodsNum}}</p> </div>
         <div class="w12 bor"> <p class="top">￥0</p></div>
         <div class="w12 bor"> <p class="top">￥{{order.orderGoodsPrice*order.orderGoodsNum}}</p></div>
         <div class="w12 bor"> <p class="top">￥{{order.orderGoodsPrice*order.orderGoodsNum}}</p></div>

     </div>
    
     
  </div>
</template>

<script>
export default {
name : 'order_details',
data() {
    
    return {
        
        order:{},
    }
},
methods:{
    
    yjfh(num,id){
        this.$axios.post('/api/order/deliver?orderId='+id+'&orderExpressNum='+num).then(res=>{
            console.log(res)
        })
    }
},

created(){
     this.$axios.post('/api/order/orderDetail?orderId='+Number(this.$route.query.orderId)).then((res)=>
    {  
    //   console.log(res)  
    this.order=res.data.data
    console.log(this.order)
    }).catch((err)=>{console.log(err)})
  
}
  }
</script>

<style  scoped>
*{
    margin: 0px;
    padding: 0px;
}

.order_a{
    overflow: hidden;
}
.order_a>div{
    float: left;
    margin-left: 30px;
}
.order_state_h{
    margin-top: 10px;
   width: 100%;
    height: 220px;
     border: 1px solid #E6E6E6;
     border-top: 2px solid #17A1FF;
}
.order_state_h>div{
    float: left;
}
 .jkl_1{
   border-right: solid 1px #E6E6E6;
   line-height: 30px;
 }
.order_state_l{
    margin-left: 30px;
    margin-top: 25px;
    border-right: 1px dotted black;
    width: 25%;
    height: 160px;
    line-height: 160px;
    text-align: center;
    font-size: 25px;
}
.bor{
    border-right: solid 1px #E6E6E6;
    height: 160px;
    
}
.w20{
    width: 30%;
}
.w60{
    width: 60%;
}
.order_state_r{
    margin-left:10px ;
    margin-top: 25px;
    width: 70%;
    height: 160px;     
}
.el-steps{
margin-top: 60px;
}

.cancel{
    color: red;
}
.jkl_2>div{
    margin-top: 100px;
    font-size: 30px;
}

.complete{
    color: #29B335;
}
.information{
    margin-top: 30px;
    width: 100%;
    height: 300px;
}
.information{
     border: 1px solid #E6E6E6;
}
.information>div{
    margin-top: 20px;
    margin-left:30px ;
    border-right: #E6E6E6 1px solid;
    height: 260px;
    width: 22%;
    float: left;
    line-height: 40px;
}
.image{
      margin-top:30px ;
  margin-left: 100px;
  margin-right: 20px;
}
.tbhead_head{
  margin-top: 20px;
  width: 100%;
  background-color: #EBEFF2;
  text-align: center;
  line-height: 40px;
  height: 40px;
}
.tbhead_head>div{
float: left;
}
.w40{
  width: 35%;
}
.w12{
  width: 12%;
}

.order_tb,.order_spname{
  overflow: hidden;
  text-align: center;
  
}
.order_tb>div,.order_spname>div{
  float: left;
  
}
.order_tb{
    border: 1px solid #E6E6E6;
}
.el-image{
   
    width: 90px;
    height: 90px;
}
.lop{
    float: right;
    height: 150px;
    width: 150px;
    line-height: 50px;
}
.jkl{
    margin-top: 30px;
    overflow: hidden;
    text-align: center;
    height:300px;
    border:solid 1px #E6E6E6
}
.jkl>div{
float: left;
}
.top{
    margin-top: 60px;
}
.yjfh{
    margin-top: 80px;
}
</style>
